<template>
  <div id="assignRoles">
    <el-dialog
        title="分配角色"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="closeBtn"
        >
      <el-select v-model="roleValue" filterable multiple placeholder="请选择">
        <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
    <el-button @click="closeBtn">取 消</el-button>
    <el-button type="primary" @click="assignRolesBtn">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AssignRoles",
  data() {
    return {
      //选中的角色
      roleValue: [],
      //用户id
      userId: "",
      //角色列表
      roleList: {},

      dialogVisible: true,
    }
  },
  methods: {
    //关闭
    closeBtn() {
      this.$router.push('/staff');
    },
    //分配
    assignRolesBtn() {
      this.$confirm('此操作将修改该用户的角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //确定
         const { data: res } = await this.$http.post(`/backUserRole/assignRoles/${this.userId}`,this.roleValue);
         this.$message.success(res);
         this.$router.push('/staff')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //角色列表
    async queryRoleList() {
      const { data: res } = await this.$http.post('/backRole/queryBackRoleList');
      this.roleList = res;
    },
    //查询当前用户角色
    async queryRoles() {
      const { data: rolesList} = await this.$http.post(`/backUserRole/queryBackUserRoleByUserId/${this.userId}`);
      for (let i=0;i<rolesList.length;i++) {
        this.roleValue.push(rolesList[i].roleId)
      }
    },
  },
  created() {
    //用户id
    this.userId = this.$route.query.id;
    //角色列表
    this.queryRoleList();
    //回显当前角色
    this.queryRoles();
  }
}
</script>

<style scoped>

</style>